﻿@{
    ViewBag.Title = "HTML5 Canvas & AspNet SignalR App";
}
<div id="console">
    @*<div id="zoom-panel">
        <canvas id="zoom-canvas" width="200" height="200"></canvas>
    </div>*@
    <canvas id="console-canvas" width="1280" height="720" 
        onmousemove="drawCoordinate(this, 100, 'yellow');">
        您的浏览器不支持此控件，请使用IE9+或其他支持HTML5的浏览器
    </canvas>
</div>


@section Scripts{
    @Scripts.Render("~/bundles/signalr")
    <script type="text/javascript" src="~/signalr/hubs"></script>  
    @Scripts.Render("~/bundles/utils")  
    <script type="text/javascript">
        $(function () {
            ////record the zoom-panel's rect
            //cacheRectOfZoomPanel('#zoom-panel');
            ////record zoom-panel's rect when document resize or scroll.
            //$(document).resize(function () {
            //    cacheRectOfZoomPanel('#zoom-panel');
            //}).scroll(function () {
            //    cacheRectOfZoomPanel('#zoom-panel');
            //});

            //record the origin coordinate which used to transform the terminal's coordinate.
            recordOriginCoordinate('#console');
            //record the origin coordinate when document scrolling.
            $(document).scroll(function () {
                recordOriginCoordinate('#console');
            });
            //signalR Hub
            var ticker = $.connection.terminalHub;
            //broadcast is an method of client
            ticker.client.broadcast = function (x, y, message) {
                var tp = $('#tp_' + x + '_' + y);
                if (tp != null) {
                    tp.removeClass('normal').addClass('fault');
                }
            };
            //draw terminal point when connection started and attach click event to console div.
            $.connection.hub.start()
                .pipe(function () {
                    ticker.server.getAllTerminals().done(function (terminals) {
                        if (terminals != null) {
                            $('#console').remove('.point');
                            $.each(terminals, function () {
                                drawSpecialPoint('#console', this);
                            });
                        }
                    });
                })
                .done(function () {
                    $('#console').click(function (e) {
                        var e = e || window.event;
                        //var x0 = Math.ceil(e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
                        //var y0 = Math.ceil(e.clientY + document.body.scrollTop + document.documentElement.scrollTop);
                        var x0 = parseInt(e.offsetX);
                        var y0 = parseInt(e.offsetY);
                        drawSpecialPoint(this, {
                            X: parseInt(x0),
                            Y: parseInt(y0),
                            Id: 'tp_' + x0 + '_' + y0,
                            State: 'OnLine'
                        });
                        ticker.server.createTerminal(parseInt(x0), parseInt(y0), 'tp_' + x0 + '_' + y0, '', 0);                        
                    });
                    //.mousemove(function () {
                    //    dodge('#zoom-panel');
                    //});
                });            
        });
    </script>
}